@font-face {
    font-family: 'Teko-Semibold';
    src: url('../../../../wwwroot/fonts/Teko-SemiBold.ttf') format('truetype');
}


:root {
    --county-green-light: rgb(150, 220, 100);
    --county-green: rgb(129, 195, 65);
    --county-green-dark: rgb(38, 113, 42);
    --county-blue: rgb(134, 189, 211);
    --county-white: rgb(250,250,250);
    --county-black: rgb(0,0,0);
    --county-gray: rgb(240, 240, 240);
}

#website-body .sidebar .top-row,
#website-body main .top-row {
    background-color: var(--county-green-dark);
    
}

    #website-body .sidebar .top-row a,
    #website-body main .top-row a,
    #website-body main .top-row button {
        color: var(--county-white);
    }

#website-body .sidebar {
    background-color: var(--county-gray);
}

    #website-body .sidebar a,
    #website-body .sidebar button {
        color: var(--county-black);
    }

    #website-body .sidebar nav a:hover,
    #website-body .sidebar nav button:hover {
        background-color: var(--county-blue);
    }

#josephine-banner {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 250px auto;
    font-family: Teko-Semibold, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#josephine-logo {
    width: 150px;
}

#banner-item-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
    align-items: baseline;
}

    #banner-item-2 h3 {
        font-size: 28pt;
    }

    #banner-item-2 h5 {
        font-size: 14pt;
        color: #777;
    }

@media (max-width: 779px){
    #josephine-banner {
        grid-template-columns: 150px auto;
        gap: 10px;
    }
}

@media(max-width: 600px) {
    #josephine-banner {
        grid-template-columns: 100px auto auto;
    }

    #josephine-logo {
        width: 100px;
    }

    #banner-item-2 h3 {
        font-size: 1.5rem;
    }

    #banner-item-2 h5 {
        display: none;
    }
}